<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8"/>
    <meta name="Keywords" content=""/>
    <meta name="Description" content=""/>
    <title>What'on</title>
    <link type="text/css" href="${rc.getContextPath()}/front/css/all.css" rel="stylesheet" />
    <script type="text/javascript" src="${rc.getContextPath()}/front/js/jquery.js"></script>
       <link rel="stylesheet" type="text/css" href="${rc.getContextPath()}/front/css/jquery.lightbox-0.5.css" media="screen" />
 
    <script type="text/javascript" src="${rc.getContextPath()}/front/js/jquery.lightbox-0.5.js"></script>
    <style>
	.breadcrumbs{width:980px;text-align:left;margin-top: 20px;}
	.breadcrumbs p { text-transform: uppercase; font-weight: bold; }
    .breadcrumbs a { display:inline-block;padding:5px 5px 0 0;margin-right:0px; color:#1D2339;}
  	.activetitle {text-align:left;margin-bottom: 7px;font-size: 22px;color:#000000;width:980px;line-height: 42px;}
  	.details{width:734px;padding-bottom:40px;}
	.cos-supported p{ width:734px;height: 40px;line-height:40px;font-size:20px;color:#fff;background:#000;margin-top:10px;}
	.description{padding:5px;}
	.description p{text-align:left;line-height:24px;color:#000;font-size: 14px;}
	.extras{width:227px;text-align:left;}
	.extras h2{color:#000;}
	.extras h2{color:#1D2339;}
	.extras h3{width:227px; overflow:hidden;line-height:23px;}
	.extras .item .range{line-height:20px;}
	.extras .item .range p,.extras .item .range em{color:#818280;}
	.extras .missing-something {margin-top: 15px;padding-left: 32px;background: url('${rc.getContextPath()}/front/images/missing-icon.gif') 0 5px no-repeat;}
    .extras .missing-something h2{font-size:12px;}
	
	#scrollable { background-color: #efefef; border: 1px solid #ddd; padding: 10px 8px; width: 962px;_width:980px; height: 100px;margin-top: 30px; margin-bottom:40px; clear: both; }
	div.items { height: 94px; float: left; width: 916px !important; }
	div.items a { display: block; float: left; margin: 5px;_margin: 3px; width: 122px; height: 94px; background: #BBB; font-size: 50px; color: #ccc; line-height: 66px; text-decoration: none; text-align: center; cursor: pointer; }
	div.items a:hover { color: #999; }
	div.items a.active { background-position: -174px 0; color: #555; cursor: default; }
	a.prev, a.next { background: url("${rc.getContextPath()}/front/images/lr.png") no-repeat scroll 0 0 transparent; display: block; width: 20px; height: 32px; float: left; margin: 32px 0 0 0; cursor: pointer; }
	a.next { background: url("${rc.getContextPath()}/front/images/lr.png") no-repeat scroll 0 0 transparent;background-position: -20px 0px;margin-left: 4px;_margin-left: 3px; }
	a.prev:hover { background-position: 0 0px; }
	a.next:hover { background-position: -20px 0px; margin-left: 4px;}
	</style>
	 <script type="text/javascript">
    $(function () {
        $('#gallery a').lightBox();
    });
      $(function(){
          var $content = $(".scrollable_demo");
          var i = 5;  //已知显示的<a>元素的个数
          var m = 5;  //用于计算的变量
          var count = $content.find("a").length;//总共的<a>元素的个数
          $(".next").click(function(){
                if( !$content.is(":animated")){  //判断元素是否正处于动画，如果不处于动画状态，则追加动画。
                    if(m<count){  //判断 i 是否小于总的个数
                        m++;
                        $content.animate({left: "-=133px"}, 600);
                    }
                }
          });
          $(".prev").click(function(){
                if( !$content.is(":animated")){
                    if(m>i){ //判断 i 是否小于总的个数
                        m--;
                        $content.animate({left: "+=133px"}, 600);
                    }
                }
          });
      })
    </script>
    </head>
    <body>
     <#include "${base!}/front/header.html"/>
	<div class="main">
      <div class="wrap">
        <div class="fleft breadcrumbs">
          <p>
            <a href="active.html">Event</a> &gt; 
            <a href="#">Pass Events</a> &gt; 
            <a href="#">${event.title}</a>
          </p>
        </div>
        <h1 class="activetitle">${event.title}</h1>
        <div class="fleft details">
         <#if event.conentImg??||event.conentImg!=''>
          <div class='default-image-or-video'>
            <img alt="Parks Week" src="${event.conentImg!(rc.getContextPath()+'/front/images/tempyl.jpg')}" width="734px" style="border:0px solid #1D2339"/>
          </div>
          </#if>
          <div class="description">
              ${event.content!''}
          </div>
        </div>
       <div class="fright extras">
        <h2>Event Snapshot</h2>
        <div class="item">
        <h3>When: </h3>
          <div class="range">
          	 ${event.eventTime!''}
          </div>
        </div>
        <div class="item">
            <h3>Where: </h3>
            <div class="range">
                ${event.eventVenue!''}
            </div>
        </div>
        <div class="item">
            <h3>Cost: </h3>
            <div class="range">
               ${event.cost!'Free'}
            </div>
        </div>
        <#if event.link??>
        <div class="item">
            <h3>Website: </h3>
            <div class="range">
                <p><a href="${event.link}">${event.link}</a></p>
            </div>
        </div>
        </#if>
        <div class="item">
            <h3>More Info: </h3>
            <div class="range">
                ${event.moreInfo}
            </div>
        </div>
        
      </div>
      
      
      <#if imglist??&&imglist?size gt 0>
      
       <div id="scrollable">
        <a class="prev"></a>
        <div class="items" style="overflow: hidden; position: relative; visibility: visible; width: 980px;">
            <div style="position: absolute; width: 20000px; left: 0px;" class="scrollable_demo" id="gallery">
            <#list imglist as img>
                <a href="${img.url!''}" rel="lightbox1"><img border="0"   src="${img.url!''}" width="126px" height="94px"/></a>
             </#list>
            </div>
            <br clear="all"/>            
        </div>
        <!-- "prev page" link -->
        <a  class="next"></a>
	   </div>
      </#if>
      	
  	</div>
  </div>
  <#include "${base!}/front/footer.html"/>
  </body>
</html>